{% extends "base.html" %}
{% load i18n %}
{% load staticfiles %}

{% block title %}Events{% endblock %}

{% block content %}
        <div class="tabbable"> <!-- Only required for left/right tabs -->
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tabEvents" data-toggle="tab">{% trans "Events" %}</a></li>
                <li><a href="#tabSearch" data-toggle="tab"><i class="icon-search"></i></a></li>
                <li><a href="#tabAdd" data-toggle="tab"><i class="icon-plus"></i></a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tabEvents">
                    <div id="eventsHeader">
                        <div id="eventsHeaderLeft">
                            <div id="extras">
                                <a title="Reload your events." href="/account/events"><i class="icon-refresh"></i></a>
                                <a title="RSS-Feed." href="/eventfeed/{{ user.username}}{{user.id}}"><i class="icon-signal"></i></a>
                            </div><!--extras-->
                           <div id="quickfilter">
                            <a href="?quickfilter=0">
                              <span class="label label-inverse">{% trans "All" %}</span>
                           </a>
                           |
                           <a href="?quickfilter=1">
                               <span class="label label-inverse">{% trans "Past" %}</span>
                           </a>
                           |
                           <a href="?quickfilter=2">
                               <span class="label label-inverse">{% trans "Upcomming" %}</span>
                           </a>
                           |
                           <a href="?quickfilter=3">
                               <span class="label">{% trans "Today" %}</span>
                           </a>
                           |
                           <a href="?quickfilter=4">
                               <span class="label">{% trans "Week" %}</span>
                           </a>
                           |
                           <a href="?quickfilter=5">
                               <span class="label">{% trans "Month" %}</span>
                           </a>
                           |
                           <a href="?quickfilter=6">
                               <span class="label">{% trans "Year" %}</span>
                           </a>
                        </div><!-- quickfilter -->
                    </div><!--eventsHeaderLeft-->
                    <div id="eventsHeaderRight">
                        <div id="dateToday">
                                <h2><small>{% now "j" %} | {% now "F" %} </small>{% now "o" %}</h2>
                        </div>

                         <!-- datebar -->
                        <div  id="dateFilterOut">
                                {% if search_query != '' %}Search: "{{ search_query}}" | {% endif %}
                                {{date_from_day}}.{{date_from_month}}.{{date_from_year}}
                                {% if date_from_day != date_to_day or date_from_month != date_to_month or date_from_year != date_to_year %}
                                - {{date_to_day}}.{{date_to_month}}.{{date_to_year}}
                                {% endif %}
                        </div><!-- datebar-->

                    </div><!--evensHeaderRight-->
                </div>
                <div class="clear"></div>

                    <!--event_table-->
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th></th>
                                <th style="width: 35%">{% trans "Name" %}
                                    <a href="?order=10{% if search_query != '' %}&search_query={{ search_query }} {% endif %}"><i class="icon-chevron-down"></i></a>
                                    <a href="?order=11{% if search_query != '' %}&search_query={{ search_query }} {% endif %}"><i class="icon-chevron-up"></i></a>
                                </th>
                                <th style="width: 30%">{% trans "Date" %}
                                    <a href="?order=20{% if search_query != '' %}&search_query={{ search_query }} {% endif %}"><i class="icon-chevron-down"></i></a>
                                    <a href="?order=21{% if search_query != '' %}&search_query={{ search_query }} {% endif %}"><i class="icon-chevron-up"></i></a>
                                </th>
                                <th style="width: 20%">{% trans "Time" %}
                                    <a href="?order=30{% if search_query != '' %}&search_query={{ search_query }} {% endif %}"><i class="icon-chevron-down"></i></a>
                                    <a href="?order=31{% if search_query != '' %}&search_query={{ search_query }} {% endif %}"><i class="icon-chevron-up"></i></a>
                                </th>
                                <th style="width: 10%"></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for event in events %}
                            <div id="delModal{{ event.pk }}" class="modal hide fade" tabindex="-1">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h3>{% trans "Delete event" %}</h3>
                                </div><!--modal-header-->
                                <div class="modal-body">
                                    <p>
                                        <h4><small>{%trans "Do you really want to delete the following event?" %}</small></h4>
                                        <h3>{{ event.ev_name }}</h3>
                                        <h4>{{ event.ev_startdate | date:"d.m.Y"}} {% if event.ev_startdate != event.ev_enddate %}- {{ event.ev_enddate | date:"d.m.Y"}}{% endif %}</h4>
                                        <h5>{{ event.ev_starttime | date:"H:i"}} {% if event.ev_starttime != event.ev_endtime %}- {{ event.ev_endtime | date:"H:i"}}{% endif %}</h5>
                                    </p>
                                </div><!--modal-body-->
                                <div class="modal-footer">
                                    <button class="btn" data-dismiss="modal" aria-hidden="true">{% trans "Close" %}</button>
                                    <a href="/deleteEvent/?id={{ event.pk }}" class="btn btn-primary">{% trans "Delete" %}</a>
                                </div><!--modal-footer-->
                            </div><!--delModal-->

                            <div id="map_modal{{ event.pk }}" class="modal hide fade" tabindex="-1">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h3>{% trans "Location" %}</h3>
                                </div><!--modal-header-->
                                <div class="modal-body">
                                    <iframe width="500" height="400" src="http://maps.google.de/maps?hl=de&q={{ event.ev_location }}&ie=UTF8&t=&z=14&output=embed&iwloc=A" frameborder="0" scrolling="no"></iframe>
                                </div><!--modal-body-->
                                <div class="modal-footer">
                                    <button class="btn" data-dismiss="modal" aria-hidden="true">{% trans "Close" %}</button>
                                </div><!--modal-footer-->
                            </div><!--edit_modal-->

                            <div id="event_table_row_div{{ event.pk }}">
                                <tr class="popover-inner" rel="popover" title="<h4>{{event.ev_name}}</h4>" data-content="<div class=&quot;event_color_div_big&quot; style=&quot;background-color:{{ event.ev_color }};&quot;></div><h5>{% trans "Description" %}</h5>{{ event.ev_description }}<br><h5>{% trans "Location" %}</h5>{{ event.ev_location }}" id="event_table_row{{ event.pk }}">
                                    <td>
                                        <div class="event_color_div" style="background-color:{{ event.ev_color }};"></div>
                                    </td>
                                    <td>{{ event.ev_name }}</td>
                                    <td>{{ event.ev_startdate | date:"d.m.Y"}} {% if event.ev_startdate != event.ev_enddate %}- {{ event.ev_enddate  | date:"d.m.Y"}}{% endif %}</td>
                                    <td>{{ event.ev_starttime | date:"H:i"}} {% if event.ev_starttime != event.ev_endtime %}- {{ event.ev_endtime | date:"H:i"}}{% endif %}</td>
                                    <td>
                                        <div id="extras_event{{ event.pk }}">
                                            <a title="{% trans "Location..." %}" href="#map_modal{{ event.pk }}" id="map_button" data-toggle="modal"><i class="icon-map-marker"></i></a>
                                            </a>
                                            |
                                            <a title="{% trans "Delete this event..." %}" href="#delModal{{ event.pk }}" id="delete_button" data-toggle="modal"><i class="icon-trash"></i></a>
                                        </div>
                                    </td>
                                </tr>
                            </div><!--event_table_row_div{{ event.pk }}-->
                        </tbody>

                        {% empty %}
                        </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="5">{% trans "No events found." %}</td>
                                </tr>
                            </tfoot>
                        {% endfor %}
                    </table>
                </div><!-- tab-pane: Events -->
                <div class="tab-pane" id="tabSearch">
                    <form action="" method='post' class="pull-left">
                         {% csrf_token %}
                         <div id="date_input" class="inline pull-left">
                             <select class="input-mini" name="date_from_day">
                                 {% for day in days %}
                                     <option {% if day == date_from_day %}selected="selected"{% endif %}>{% if day < 10 %}0{% endif %}{{day}}</option>
                                 {% endfor %}
                             </select>
                             <select class="input-mini" name="date_from_month">
                                 {% for month in months %}
                                     <option {% if month == date_from_month %}selected="selected"{% endif %}>{% if month < 10 %}0{% endif %}{{month}}</option>
                                 {% endfor %}
                             </select>
                             <select class="input-small" name="date_from_year">
                                 {% for year in years %}
                                     <option {% if year == date_from_year %}selected="selected"{% endif %}>{{year}}</option>
                                 {% endfor %}
                             </select>
                              -
                             <select class="input-mini" name="date_to_day">
                                 {% for day in days %}
                                     <option {% if day == date_to_day %}selected="selected"{% endif %}>{% if day < 10 %}0{% endif %}{{day}}</option>
                                 {% endfor %}
                             </select>
                             <select class="input-mini" name="date_to_month">
                                 {% for month in months %}
                                     <option {% if month == date_to_month %}selected="selected"{% endif %}>{% if month < 10 %}0{% endif %}{{month}}</option>
                                 {% endfor %}
                             </select>
                             <select class="input-small" name="date_to_year">
                                 {% for year in years %}
                                     <option {% if year == date_to_year %}selected="selected"{% endif %}>{{year}}</option>
                                 {% endfor %}
                             </select>
                         </div><!-- date-input -->
                         <div id="search" class="pull-right input-append">
                             <input class="form-search" id="searchField" name="search_query" type="text" placeholder="{% if search_query != '' %}{{ search_query }}"{% else %}{% trans "Search" %}"{% endif %} maxlength="30">
                             <button class='btn add-on'>
                                 <i class="icon-search"></i>
                             </button>
                         </div><!-- searchbar -->
                    </form><!-- filter-form -->
                </div><!-- tab-pane:Search -->
                <div class="tab-pane" id="tabAdd">
                    {% include "addEvent.html" %}
                </div><!-- tab-pane: Add -->
            <div><!-- tab-content -->
        </div><!-- tabable -->
{% endblock %}